<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            height: 100%;
            background-color: #f8f8f8;
        }
        .main {
            height: 100%;
            padding: 15px;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        .main img {
            width: 100%;
            vertical-align: middle;
            display: block;
        }
    </style>
</head>
<body>
    <div class="main">
        <img class="head_img" src="../image/default.png">
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        shop = $api.getStorage('shop_data');
        var head_img = formatHeadImg(shop.img);
        $('.head_img').attr('src',head_img);

        api.addEventListener({
            name: 'changeHeadEvent'
        }, function(ret, err) {
            if (ret) {
                fnUploadImg();
            } 
        });
    };

    function fnUploadImg() {
        var UIMultiSelector = api.require('UIMultiSelector');
        UIMultiSelector.open({
             rect: {
                 h: 210
             },
             text: {
                 title: '上传头像',
                 leftBtn: '',
                 rightBtn: '取消',
             },
             max: 0,
             singleSelection: true,
             styles : {
                mask: 'rgba(0,0,0,0.3)',
                title: {
                    bg: '#eef2f3',
                    color:'#000',
                    size: 16,
                    h: 50
                },
                leftButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 0,
                    marginT: 5,
                    marginR: 8,
                    color: '#fff',
                    size: 14
                },
                rightButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginR: 8,
                    color: '#1dbcd1',
                    size: 14
                },
                item : {
                    h : 80,
                    textAlign : 'center',
                    size:16
                },
                icon: {
                    w:0,
                    h:0,
                    marginT: 0,
                    marginH: 0,
                    bg: '#fff',
                    align: 'left'
                }
             },
             animation: true,
             items: [{
                text : "从手机相册选择",
                status : "normal"
             },{
                text : "拍照",
                status : "normal"
             }]
        }, function(ret, err) {
             if (ret) {
                 if(ret.eventType == 'clickRight') {
                    UIMultiSelector.close();
                 }
                 if(ret.eventType == 'clickItem') {
                    var select_text = ret['items'][0]['text'];
                   if(select_text == '拍照') {
                        fnChoosePic(0);
                   }else {
                        fnChoosePic(1);
                   }
                    UIMultiSelector.close();
                 }
             } else {
                 showError(err.code,err.msg);
             }
        });
    }

    function fnChoosePic (type_) {
        if(type_)
        {
            // sourceType = 'album';
            sourceType = 'library';
        }
        else
        {
            sourceType = 'camera'; 
        }
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 80,
            targetWidth: 100,
            // targetHeight: 100,
            saveToPhotoAlbum: false
        }, function( ret, err ){ 
            if(ret){
                ajaxUploadPic(ret.data);
            }else{
                // showError(err.code,err.msg);
            }
        });
    };
    function ajaxUploadPic (data_) {
        api.ajax({
            url: rootPath+'/api/seller/update_photo',
            method: 'post',
            data: {
                values: { 
                    shop_id: shop.id,
                    token: shop.token,
                },
                files: { 
                    photo: data_
                }
            }
        },function(ret, err){
            if(ret.status == 200)
            {
                var head_img = formatHeadImg(ret.path);
                $('.head_img').attr('src',head_img);
                api.sendEvent({
                    name: 'shopHeadChangeEvent',
                    extra: {
                        shop_img: ret.path, 
                    }
                });
                api.closeWin();
            }else{
               
            }
        });
    };
</script>
</html>